<template>
	<div id="account">
		<nav-tab activeColor="#101010">
			<header-item>
				<div class="header-nav1" slot="header-img" @click="fanhui">
					<van-icon name="arrow-left" size="25px" color="#ffffff" />
				</div>
				<div class="header-nav2" slot="header-sc">
					<div style="font-size: 18px;color: #FFFFFF;">产品详情</div>
				</div>
				<div class="header-nav3" slot="header-xingx">
					<van-icon name="more-o" size="25px" color="#ffffff" />
				</div>
			</header-item>
		</nav-tab>
		<div class="zhangh-context">
			<div class="context-top">
				<div class="title">日益月鑫60天(8905)</div>
				<div class="baifenbi">4.08<span>%</span></div>
				<div class="nianhua">上期年化</div>
			</div>
			<div class="codeflex">
				<div class="codeflex-item">
					<div>62天</div>
					<span>投资期限</span>
				</div>
				<div class="codeflex-item">
					<div>5万元</div>
					<span>起购金额</span>
				</div>
				<div class="codeflex-item">
					<div>1,008,790人</div>
					<span>购买人数</span>
				</div>
			</div>
		</div>
		<!-- 理财周报 -->
		<div class="licaizhoubo">
			<div style="border-bottom: 1px solid #CCCCCC;">
				<van-cell>
					<template #title>
						<span class="custom-title">单元格</span>
					</template>
				</van-cell>
			</div>
			<div class="buzoutiaoBox">
				<van-steps :active="active" inactive-color="#CCCCCC" active-color="#82D5F9">
					<van-step>
						<div class="buzou">今日购买<span>(04-28)</span></div>
					</van-step>
					<van-step>
						<div class="buzou">产品起息<span>(2017-05-02)</span></div>
					</van-step>
					<van-step>
						<div class="buzou">产品到期<span>(2017-07-03)</span></div>
					</van-step>
				</van-steps>
			</div>
		</div>
		<!-- 产品简述 -->
		<div class="jianshu">
			<div style="border-bottom: 1px solid #CCCCCC;">
				<van-cell>
					<template #title>
						<span class="custom-title">产品简述</span>
					</template>
				</van-cell>

			</div>
			<div class="jianshu-context">
				短期系统银行理财产品，非保本浮动利益。全行客户，不限卡种；适合能够确定用款期限需求的客户
				；到期后自动赎回并返回银行账户，不用过多关注或担心错过赎回。
			</div>
			<div class="qushitu">
				<div class="qushitu-title">上期年化</div>
				<div class="qushitu-img"><img src="@/assets/qst.png" /></div>
			</div>
			<ul class="qushitu-ul">
				<li class="qushitu-item">近一个月</li>
				<li class="qushitu-item">近3个月</li>
				<li class="qushitu-item">近6个月</li>
				<li class="qushitu-item">近1年</li>
			</ul>
		</div>
		<!-- 买入规则 -->
		<div class="mairu">
			<div style="border-bottom: 1px solid #CCCCCC;">
				<van-cell>
					<template #title>
						<span class="custom-title">买入规则</span>
					</template>
				</van-cell>

			</div>
			<div class="mairu-context">存续期内可在每天的9:30-22:30办理申购。</div>
		</div>
		<!-- 收益规则 -->
		<div class="shouyi">
			<div style="border-bottom: 1px solid #CCCCCC;">
				<van-cell>
					<template #title>
						<span class="custom-title">收益规则</span>
					</template>
				</van-cell>

			</div>
			<div class="shouyi-context">理财计划存续期每天9:30-22:30申购下一个工作日起息。每工作日9:30前公布当日到期产品自动赎回的持有期年化收益率。</div>
		</div>
		<!-- 赎回规则 -->
		<div class="shuhui">
			<div style="border-bottom: 1px solid #CCCCCC;">
				<van-cell>
					<template #title>
						<span class="custom-title">赎回规则</span>
					</template>
				</van-cell>

			</div>
			<div class="shuhui-flex">
				<div class="flex-left">普通赎回</div>
				<div class="flex-right">每个理财计划到期后本金自动赎回到张，本金和分红将在到期日后3个工作日内返回。</div>
			</div>
		</div>
		<!-- 风险评估 -->
		<div class="fengxian">
			<div style="border-bottom: 1px solid #CCCCCC;">
				<van-cell>
					<template #title>
						<span class="custom-title">赎回规则</span>
					</template>
				</van-cell>
			</div>
			<div class="fengxian-context">
				<div>R2级（较低风险）</div>
				<div>稳健型，本金风险相对较小，收益浮动相对可控。</div>
			</div>
		</div>
		<div class="cleekode">
			<div class="cell50">
				<div class="cell50-title">产品公告</div>
				<div class="cell50-icon">
					<van-icon name="arrow" />
				</div>
			</div>
			<div class="cell50">
				<div class="cell50-title">产品公告</div>
				<div class="cell50-icon">
					<van-icon name="arrow" />
				</div>
			</div>
		</div>
		<div class="footer-dibu">
			<div class="footer-btn">购买</div>
		</div>
	</div>
</template>

<script>
	import NavTab from '@/components/navtar/Header.vue'
	import HeaderItem from '@/components/navtar/HeaderItem.vue'
	import {
		Icon,
		Cell,
		CellGroup,
		Button,
		Step,
		Steps
	} from 'vant';
	export default {
		data() {
			return {
				active: 1,
			};
		},
		methods: {
			fanhui() {
				this.$router.go(-1)
			},
		},
		components: {
			NavTab,
			HeaderItem,
			[Icon.name]: Icon,
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Button.name]: Button,
			[Step.name]: Step,
			[Steps.name]: Steps,
		}
	}
</script>

<style scoped lang="less">
	@mt: 9px;
	@back: #ffffff;

	#account {
		width: 100vw;
		background-color: rgb(240, 240, 240);
		padding-bottom: 70px;
	}

	.zhangh-context {
		margin-top: 44px;
		height: 184px;
		background: #101010;

		.context-top {
			height: 115px;
			text-align: center;
			padding-top: 20px;
			box-sizing: border-box;

			.title {
				font-size: 14px;
				color: #ffffff;
			}

			.baifenbi {
				font-size: 24px;
				color: #FFFFFF;
				margin-top: 20px;

				span {
					font-size: 13px;
					color: #FFFFFF;
					margin-left: 5px;
				}
			}

			.nianhua {
				font-size: 14px;
				color: #FFFFFF;
				margin-top: 5px;
			}


			.context-top-value {
				font-size: 15px;
				color: #FEFEFE;
			}

			/deep/.van-cell {
				background-color: #101010;
				margin-top: 10px;
				border: 1px solid #101010;
			}

			.van-icon-arrow::before {
				color: white;
			}

		}

		.codeflex {
			height: 65px;
			margin-top: 4px;
			display: flex;
			border-top: 1px solid #4D4D4D;

			.codeflex-item {
				flex: 1;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				font-size: 15px;
				color: #FEFEFE;

				span {
					font-size: 14px;
					color: #7E7E7E;
					margin-top: 5px;
				}

				&:nth-child(2)::after {
					content: "";
					width: 1px;
					height: 38px;
					background-color: #4D4D4D;
					position: absolute;
					left: 65%;
				}

				&:nth-child(2)::before {
					content: "";
					width: 1px;
					height: 38px;
					background-color: #4D4D4D;
					position: absolute;
					right: 65%;
				}
			}

		}
	}

	.licaizhoubo {
		height: 140px;
		background-color: @back;
		margin-top: @mt;

		.custom-title {
			margin-right: 4px;
			vertical-align: middle;
			font-size: 16px;
			color: #383838;
		}

		.buzoutiaoBox {
			padding: 0 20px;
			margin: 20px 0px;

			.buzou {
				font-size: 12px;
				color: #929292;
				text-align: center;
				margin-top: -10px;

				span {
					display: block;
					margin-left: 5px;
				}
			}
		}
	}

	.jianshu {
		// height: 454px;
		background-color: @back;
		margin-top: @mt;
		padding-bottom: 10px;

		.jianshu-context {
			font-size: 14px;
			color: #616161;
			padding: 0 14px;
			box-sizing: border-box;
			margin-top: 14px;
		}

		.qushitu {
			height: 295px;
			margin-top: 10px;

			.qushitu-title {
				font-size: 14px;
				color: #101010;
				display: flex;
				justify-content: center;
				align-items: center;

				&::before {
					content: "";
					display: block;
					width: 50px;
					height: 1px;
					background-color: #F0F0F0;
					margin: 0 26px;
				}

				&::after {
					content: "";
					display: block;
					width: 50px;
					height: 1px;
					background-color: #F0F0F0;
					margin: 0 26px;
				}
			}

			.qushitu-img {
				height: 256px;
				margin-top: 10px;

				>img {
					width: 100%;
					height: 100%;
				}
			}

		}

		.qushitu-ul {
			display: flex;
			justify-content: space-between;
			padding: 0 12px;

			.qushitu-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 67px;
				height: 28px;
				background-color: #E0E0E0;
				font-size: 14px;
				color: #008DD9;
			}
		}
	}

	.mairu {
		margin-top: @mt;
		height: 87px;
		background-color: @back;

		.mairu-context {
			height: 42px;
			font-size: 14px;
			color: #747474;
			background-color: ;
			line-height: 42px;
			padding-left: 10px;
		}
	}

	.shouyi {
		height: 131px;
		background-color: @back;
		margin-top: @mt;

		.shouyi-context {
			font-size: 14px;
			color: #616161;
			padding: 10px 10px;
		}
	}

	.shuhui {
		min-height: 131px;
		background-color: @back;
		margin-top: @mt;

		.shuhui-flex {
			display: flex;
			font-size: 14px;
			padding: 12px;
			box-sizing: border-box;

			.flex-left {
				flex: 1;
				color: #979797;
			}

			.flex-right {
				flex: 3;
				color: #616161;

			}
		}

	}

	.fengxian {
		margin-top: @mt;
		min-height: 110px;
		background-color: @back;

		.fengxian-context {
			font-size: 14px;
			color: #616161;
			padding: 8px 12px;

			>div {
				margin-top: 2px;
			}
		}
	}

	.cleekode {
		background-color: @back;
		margin-top: @mt;

		.cell50 {
			height: 50px;

			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0px 12px;
			font-size: 16px;
			color: #101010;
			border-bottom: 1px solid #E3E3E5;

		}
	}
	.footer-dibu{
		width: 100vw;
		height: 48px;
		background-color: @back;
	    position: fixed;
		left: 0;
		bottom: 0;
		.footer-btn{
			width: 314px;
			height: 48px;
			background-color: #0074D9;
			text-align: center;
			line-height: 48px;
			color: white;
			font-size: 18px;
			float: right;
		}
	}
</style>
